<template>
  <div class="main">
    <breadcrumb/>
    <el-card>
      <div id="main" style="width: 1500px;height: 600px"></div>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import * as echarts from 'echarts'
import { getReportsData } from '../../api/reports/reports'
import _ from 'lodash'

export default {
  name: 'Reports',
  components: { Breadcrumb },
  data: () => {
    return {
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        }
      }
    }
  },
  created () {
  },

  async mounted () {
    const myChart = echarts.init(document.getElementById('main'))

    const { data: res } = await getReportsData()
    if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
    // console.log(res.data)

    const result = _.merge(res.data, this.options)

    myChart.setOption(result)
  },

  methods: {
  }
}
</script>
<style lang="less" scoped>
  @import "./index";
</style>
